define(["jquery"],function($){
	$(function(){

		function UESlider(element,config){

			var that = this,options = {
				step : 1,
				max : 9999,
				min : 0,
				value:0,
				slider : true,
				trim : true,
				unit : false,
				unitValue : "px",
				change : function(){},
				start : function(){},
				stop : function(){}
			};

			this.config = $.extend(options,config);
			var str = '<div class="slider"> <div class="slider-sp" style="display:'+(this.config.slider ? "inline-block" : "none")+';"> <div class="s-block"></div> <div class="bg-slider"></div> </div> <div class="slider-in" style="display:'+(this.config.trim ? "inline-block" : "none")+';"> <input type="text" class="slider-input" value="0" /> <div class="slider-pn"> <span class="prev"></span> <span class="next"></span> </div> </div> <div class="unit" style="display:'+(this.config.unit ? "inline-block":"none")+'"> <select> <option value="px">px</option> <option value="%">%</option> </select> </div> </div>'; element.append(str);
			this.element = element;

			function getCurrLeft(){
				return parseInt($(".s-block",element).css("left"),10);
			}

			function getEvent(event){
				return (event || window.event);
			}

			that.setVlaue(that.config.value);

			$(".slider-sp",element).click(function(event){
				var  tl = $(this).offset().left, l = getEvent(event).pageX,w = parseInt($(".s-block",element).width(),10), curL =  getCurrLeft(),nl = l-tl; 
				that.setSlidertValue(that.getValue(nl>curL ? nl-w : nl));
			});

			$(".s-block",element).on("mousedown",function(event){
				var cx = getEvent(event).pageX,l =getCurrLeft(),max = that.getSliderWidth();
				$(document).on("mousemove.UESlider",function(event){
					var left = l + (getEvent(event).pageX-cx);
					that.setSlidertValue(that.getValue(left < 0 ? 0 : left > max ? max : left));
					return false;
				});
			}).on("click",function(e){
				getEvent(e).stopPropagation();
			});

			$(".unit select",element).change(function() {
				var v = $(this).val(),px = that.getSliderValue();
				that.config.unitValue = v;
				that.setSlidertValue(px);
			});

			$(document).on("mouseup",function(){
				$(document).off("mousemove.UESlider");
				return true;
			});

			$(".slider-input",element).change(function(event) {
				that.setSlidertValue(that.getSliderValue());
			});

			$(".prev",element).click(function(){
				that.setSlidertValue(that.setChangeValue(that.getSliderValue()+that.config.step));
			});

			var interval = null,t = 150;
			$(".prev",element).off("mousedown").on("mousedown",function(){
				interval = setInterval(function(){
					that.setSlidertValue(that.setChangeValue(that.getSliderValue()+that.config.step));
				},t);

				$(document).off("mouseup.interval").on("mouseup.interval",function(){
					clearInterval(interval);
				})
			});

			$(".next",element).off("mousedown").on("mousedown",function(){
				interval = setInterval(function(){
					 that.setSlidertValue(that.setChangeValue(that.getSliderValue()-that.config.step));
				},t);
				$(document).off("mouseup.interval").on("mouseup.interval",function(){
				clearInterval(interval);
			})
			})


			$(".next",element).click(function(){
				that.setSlidertValue(that.setChangeValue(that.getSliderValue()-that.config.step));
			});
		}

		UESlider.prototype= {
			getMin : function(){
				return this.config.min;
			},

			getMax : function(){
				return this.config.max;
			},

			 getChange:function(){
				return this.config.change;
			},
			 getSliderWidth : function(){
				return $(".slider-sp",this.element).width()-$(".s-block",this.element).width();
			},

			getMaxValue : function (){
				return parseInt((this.getMax()-this.getMin()),10);
			},

			getValue : function (l){
				return  (Math.ceil(l*(this.getMaxValue()/this.getSliderWidth()))+this.getMin());
			},

			getLeft : function getLeft(v){
				return (v-this.getMin())*(this.getSliderWidth()/this.getMaxValue());
			},

			getSliderValue : function (){
				var v = parseFloat(($(".slider-input",this.element).val()));
				return this.config.unitValue == "px" ? v : this.percentumShiftPX(v);
				
			},
			setLeft : function (v){
				$(".s-block",this.element).css("left",this.getLeft(v));
				$(".bg-slider",this.element).css({
					"width":this.getLeft(v)+10,
					"height":"100%",
					"border-radius":"5px",
					"background":"#c1caa3"
				});
			},

			setSlidertValue : function (v){
				this.setVlaue(v);
				this.getChange()(this.shift(v)+this.config.unitValue);
			},

			/**
			 * 百分比转换像素
			 * @param  {[type]} per [description]
			 * @return {[type]}     [description]
			 */
			percentumShiftPX : function(per){
				return per*this.getMax()/100;
			},

			/**
			 * 像素转换百分比
			 * @param  {[type]} px [description]
			 * @return {[type]}    [description]
			 */
			pxShiftPercentum : function(px){
				return px/this.getMax()*100;
			},

			shift : function(v){
				return this.config.unitValue == "px" ? v : this.pxShiftPercentum(v);
			},
			setVlaue : function(v){
				v = this.setChangeValue(v);
				$(".slider-input",this.element).val(this.shift(v));
				this.setLeft(v);
			},

			setChangeValue : function(v){
				return v > this.getMax() ? this.getMax() : v < this.getMin() ? this.getMin() : v;
			}
		};

		$.fn.UESlider = function(config){
			var slider = $(this).data("UESlider");
			if(!slider){
				slider =  new UESlider($(this),config);
				$(this).data("UESlider",slider);
			}
			
			return slider;
		}
	});

});